import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Card, Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button,Modal,Spin} from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
import BreadcrumbCustom from '../BreadcrumbCustom';
import {ExpertList,ExpertForm} from '../Common';
import {openExpertFormModel,LoadSearchExpert,ExpertInfoModel,setCommonList,showCommonSearchLoading} from '../../action/Action';

class BasicForms extends Component {
    constructor(props){
        super(props);
        /* 获取数据类型 */
        this.state = {
            confirmDirty: false,
        };
        let {dispatch} = this.props;
        this.openExpertForm=()=>{
            dispatch(ExpertInfoModel(""));
            dispatch(openExpertFormModel(true));
        }
    }
    handleSearch = (e) => {
        e.preventDefault();
        let {dispatch} = this.props;
        this.props.form.validateFieldsAndScroll((err, values) => {
            dispatch(showCommonSearchLoading(true))
            if (!err) {
                dispatch(LoadSearchExpert('set_expert_list',values.name,values.org))
            }
        });
    };
    componentWillMount(){
        let {dispatch} = this.props;
        dispatch(setCommonList("set_expert_list",[]));
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        const {CommonSystem} = this.props;
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 8 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 14 },
            },
        };
        const tailFormItemLayout = {
            wrapperCol: {
                xs: {
                    span: 24,
                    offset: 0,
                },
                sm: {
                    span: 14,
                    offset: 8,
                },
            },
        };
        return (
            <div className="gutter-example">
                <BreadcrumbCustom first="专家" second="新增专家" />
                <Row gutter={16}>
                    <Col className="gutter-row" span={24}>
                        <Spin spinning={CommonSystem.searchLoading} delay={500} tip="正在搜索">
                            <div className="gutter-box">
                                <Card title="搜索查询" bordered={false}>
                                    <Form onSubmit={this.handleSearch} layout="inline">
                                        <FormItem
                                            {...formItemLayout}
                                            label={(
                                                <span>
                                            姓名&nbsp;
                                                    <Tooltip title="专家的真实姓名">
                                            <Icon type="question-circle-o" />
                                          </Tooltip>
                                        </span>
                                            )}
                                            hasFeedback
                                        >
                                            {getFieldDecorator('name', {
                                                rules: [{ required: true, message: '请输入姓名', whitespace: true }],
                                            })(
                                                <Input />
                                            )}
                                        </FormItem>
                                        <FormItem
                                            {...formItemLayout}
                                            label={(
                                                <span>
                                            机构&nbsp;
                                                    <Tooltip title="专家的真实机构">
                                            <Icon type="question-circle-o" />
                                          </Tooltip>
                                        </span>
                                            )}
                                            hasFeedback
                                        >
                                            {getFieldDecorator('org', {
                                                rules: [{ required: true, message: '请输入专家机构', whitespace: true }],
                                            })(
                                                <Input />
                                            )}
                                        </FormItem>
                                        <FormItem {...tailFormItemLayout}>
                                            <Button type="primary" htmlType="submit" size="large">搜索</Button>
                                        </FormItem>
                                        <FormItem {...tailFormItemLayout}>
                                            <Button icon="plus" onClick={this.openExpertForm}>添加专家</Button>
                                        </FormItem>
                                    </Form>
                                </Card>
                            </div>
                        </Spin>
                    </Col>
                </Row>
                <ExpertList paginationFlag={false}/>
                <ExpertForm />
            </div>
        )
    }
}

const Main = Form.create()(BasicForms);

export default connect(state=>({
    User: state.User,
    Expert:state.Expert,
    CommonSystem:state.CommonSystem
}))(Main);